<style rel="stylesheet/scss" lang="scss" scoped>
    .qx-container {
        display: flex;
        flex: 1;
		box-sizing: border-box;
        flex-direction: column;
		.page-box{
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}
		.property-box{
			width: 100%;
			height: 100%;
			flex: 1;
			.property-box_tab{
				display: flex;
				height: 100%;
				justify-content: space-around;
				flex-direction: row;
				.first-box,.second-box,.third-box{
					flex: 1;
					display: flex;
					height: 100%;
				}
			}
		}
		.third-box{
			flex: 2 !important;
		}
		.tar-bg{
			background: #409EFF;
			margin-left: 5px;
		}
    }
</style>

<template>
    <div class="qx-container p-all-10">
        <tabs></tabs>
		<div class="property-box">
			<el-button type="success" class="tar-bg" @click="loadRecord">修改记录</el-button>
			<div class="property-box_tab"> 
				<first-cation v-if="f_load" :leve-first-list="leveFirstList" @searchFirst="searchFirst" @addFLeave="addFLeave" @selectFirstItem="selectFirstItem"></first-cation>
				<second-cation v-if="s_load" :leve-second-list="leveSecondList" @searchSecond="searchSecond" @selectSecondItem="selectSecondItem" @addSLeave="addSLeave" :first-id="firstId"></second-cation>
				<third-cation v-if="z_load" :leve-third-list="leveThirdList" @handleFridLeave="handleFridLeave" :second-id="secondId"></third-cation>
			</div>
			<el-dialog title="修改记录" center :visible.sync="dialogTableVisible">
				<el-table :data="logList">
					<el-table-column property="adminName" label="操员" width="150"></el-table-column>
					<el-table-column property="modify" label="更改详情" width="200"></el-table-column>
					<el-table-column property="createTime" label="修改时间"></el-table-column>
				</el-table>
				<div class="page-box">
					<span>共{{total}}条</span>
					<current-page :current-page="page" :page-size="pageSize" :page-total="total" @handleCurrentChange="handleTabChange"></current-page>
				</div>
			</el-dialog>
		</div>
    </div>
</template>
<script>
    import tabs from '@/components/tabs/tabs.vue'
	import firstCation from './components/firstCation.vue'
	import secondCation from './components/secondCation.vue'
	import thirdCation from './components/thirdCation.vue'
	import { mapMutations ,mapGetters} from 'vuex'
	import { SUCCESS_REQUEST_STATUS } from '@/utils/config.js'
	import currentPage from '@/components/current-page/current-page.vue'
    export default {
		data() {
			return {
				f_load: false,
				s_load: false,
				z_load: false,
				leveFirstList: [],		// 一级列表数据
				leveSecondList: [],		// 二级列表数据
				leveThirdList: [],		// 三级列表数据
				firstId: '',			// 一级id
				secondId: '',			// 二级id
				page: 0,
				logList: [],
				pageSize: 10,
				total: 0,
				thirdId: '',			// 三级id
				dialogTableVisible: false,	// 是否显示记录弹窗
			}
		},
		created() {
			// 初始化数据
			this._initFirstData()
		},
		methods: {
			searchFirst(val) {
				this._initFirstData(val)
			},
			searchSecond(val) {
				this.getSecondData(val)
			},
			selectFirstItem(catId) {
				this.firstId = catId
				this.getSecondData()
			},
			selectSecondItem(catId) {
				this.secondId = catId
				this.getThirdData()
			},
			handleFridLeave() {
				this.getThirdData()
			},
			addFLeave() {
				setTimeout(() => {
					this.$ajax({
						api: 'category/list',
						params: {
							parentId: '',
							keyword: ''
						}
					}).then(res => {
						if(res.status === SUCCESS_REQUEST_STATUS) {
							if(res.data && res.data.length > 0) {
								this.leveFirstList = res.data
								this.firstId = res.data[0].catId
							}
						}
					}).catch(err => {
						this.$message({
							message: err.message,
							type: 'error'
						})
					})
				},200)
			},
			addSLeave() {
				this.$ajax({
					api: 'category/list',
					params: {
						parentId: this.firstId,
						keyword: ''
					}
				}).then(res => {
					console.log(res)
					if(res.status === SUCCESS_REQUEST_STATUS) {
						if(res.data && res.data.length > 0) {
							this.leveSecondList = res.data
							this.secondId = res.data[0].catId
						}
					}
				}).catch(err => {
					this.$message({
						message: err.message,
						type: 'error'
					})
				})
			},
			handleTabChange(page) {
				this.page = page
				this.loadRecord()
			},
			loadRecord() {
				this.$ajax({
					api: 'category/loglist',
					params: {
						page: this.page,
						pageSize: this.pageSize
					}
				}).then(res => {
					console.log(res)
					if(res.status === SUCCESS_REQUEST_STATUS ){
						this.logList = res.data.logList
						this.total = res.data.page.total
						this.dialogTableVisible = true
					}
				}).catch(err => {
					console.log(err)
				})
			},
			_initFirstData(value = '') {
				this.$ajax({
					api: 'category/list',
					params: {
						parentId: '',
						keyword: value
					}
				}).then(res => {
					console.log(res)
					if(res.status === SUCCESS_REQUEST_STATUS) {
						if(res.data && res.data.length > 0) {
							res.data[0].select =true
							this.leveFirstList = res.data
							this.firstId = res.data[0].catId
							this.getSecondData()
							this.f_load = true
							return
						}
						this.leveFirstList = []
						this.leveSecondList = []
						this.leveThirdList = []
						
					}
				}).catch(err => {
					this.$message({
						message: err.message,
						type: 'error'
					})
				})
			},
			getSecondData(value = '') {
				
				this.$ajax({
					api: 'category/list',
					params: {
						parentId: this.firstId,
						keyword: value
					}
				}).then(res => {
					console.log(res)
					if(res.status === SUCCESS_REQUEST_STATUS) {
						if(res.data && res.data.length > 0) {
							res.data[0].select =true
							this.leveSecondList = res.data
							this.secondId = res.data[0].catId
							this.getThirdData()
							this.s_load = true
							return
						} 
						this.leveSecondList = []
						this.leveThirdList = []
					}
				}).catch(err => {
					this.$message({
						message: err.message,
						type: 'error'
					})
				})
			},
			getThirdData(value = '') {
				this.$ajax({
					api: 'category/queryattr',
					params: {
						catId: this.secondId,
						keyword: value
					}
				}).then(res => {
					console.log(res)
					if(res.status === SUCCESS_REQUEST_STATUS) {
						if(res.data && res.data.length > 0) {
							this.leveThirdList = res.data
							this.z_load = true
							this.thirdId = res.data[0].catId
							return
						}
						this.leveThirdList = []
					}
				}).catch(err => {
					this.$message({
						message: err.message,
						type: 'error'
					})
				})
			}
		},
        components: {
            tabs,
			firstCation,
			secondCation,
			thirdCation,
			currentPage
        },
		watch: {
			dialogTableVisible(val) {
				console.log(val)
				if(!val){
					this.page = 0
					this.pageTotal = 0
				}
			}
		}
    }
	
</script>
